<template>
  <div class="wine-show">
    <h1>酒款展示</h1>
    <div class="wine-item-show" v-for="(wineItem, index) of wineAll" :key="index">
      <div class="wine-item-name">
        <h2>酒款1</h2>
        <span v-if="!wineItem.shared">未分享</span>
        <span v-else>已分享</span>
      </div>
      <div class="wine-item-info">
        <img src="http://www.finewest.cn/resources/style/common/images/good.jpg" width="100">
        <div class="main-info">
          <h3 class="en-name">{{wineItem.name}}</h3>
          <h3 class="ch-name">{{wineItem.cnName}}</h3>
          <p class="price info-item">单价：<span class="price-number">￥{{wineItem.price}}</span></p>
          <p class="year info-item">年份：{{wineItem.year}}</p>
          <p class="wine-number info-item">数量：{{wineItem.boxCount}}箱</p>
          <p class="vol info-item">包装：{{wineItem.box}}</p>
          <p class="total">共计：<span class="price-number">￥{{wineItem.payMoney}}</span></p>
        </div>
      </div>
      <div class="zhifu-info">
        <p class="share-info">共需分享{{wineItem.boxCount}}人</p>
        <p class="share-info">已支付{{wineItem.payedCount}}/{{wineItem.boxCount}}</p>
        <p class="pay-many" @click="zhongChou(gcid[index])">去众筹</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'wineShow',
    data () {
      return {
        wineAll: '',
        gcid: []
      }
    },
    mounted: function () {
      var fValue = this.$utils.getQueryStringByName('ma')
      this.$http({
        method: 'get',
        url: this.$utils.fineURL() + '/m/v2/fcode_orders.htm',
        headers: {},
        params: {'fcode': fValue},
        emulateJSON: true
      }).then(function (response) {
        response = JSON.parse(response.bodyText)
        console.log(response)
        this.wineAll = response
        for (var i = 0; i < this.wineAll.length; i++) {
          this.gcid.push(this.wineAll[i].gcid)
        }
      }, function () {
        console.log('获取数据失败')
      })
    },
    methods: {
      zhongChou (index) {
        location.href = 'http://www.finewest.cn/wine-fund/?gcid=' + index + '#/youzixifang1'
      }
    }
  }
</script>

<style scope lang="scss">
  .wine-show{
    h1{
      height: 44px;
      line-height: 44px;
      text-align: center;
      font-size: 16px;
      color: #444444;
      background: #f5f5f5;
    }
    .wine-item-name{
      position: relative;
      margin: 0 15px;
      height: 33px;
      line-height:33px;
      border-bottom: 1px solid #f5f5f5;
      h2{
        font-size: 14px;
        color: #777777;
        font-weight: normal;
      }
      span{
        font-size: 14px;
        color: #444444;
        position: absolute;
        right: 0;
        top:0;
        line-height: 33px;
      }
    }
    .wine-item-info{
      position:relative;
      img{
        position: absolute;
        top: 25px;
        left: 20px;
      }
      .main-info{
        padding: 20px 21px 20px 141px;
        font-size: 0;
        h3{
          font-size: 13px;
          color: #444444;
          &.en-name{
             line-height: 15px;
             height: 30px;
           }
          &.ch-name{
              line-height: 15px;
           }
        }
        p{
          margin-top:4px;
          span{
            color: #e92d46;
          }
        }
        p.info-item{
          font-size: 13px;
          color: #444444;
          width: 50%;
          display: inline-block;
        }
      }
    }
    .zhifu-info{
      font-size: 0;
      border-top: 1px solid #f5f5f5;
      border-bottom: 1px solid #f5f5f5;
      p{
        display: inline-block;
        height: 43px;
        line-height: 43px;
        &.share-info{
          width: 30%;
          text-align: center;
          font-size: 13px;
          color: #444444;
         }
         &.pay-many{
            width: 40%;
            font-size: 18px;
            color: #FFFFFF;
            background: #e92d46;
            text-align: center;
          }
      }
    }
  }
</style>
